<template>
	<div class="conainer">
		<div class="login">
			<div class="login-left">
				<img src="@/assets/img/login1.png" alt="登录" />
			</div>
			<div class="login-right">
				<h4>{{ $t('system.name') }}</h4>
				<component :is="login" @change="changeLogin"></component>
			</div>
		</div>
	</div>
</template>
<script setup lang="ts">
import userLogin from './userLogin.vue';
import codeLogin from './codeLogin.vue';
import register from './register.vue';
const login = shallowRef<any>(userLogin);
const changeLogin = (value: string) => {
	switch (value) {
		case 'code':
			login.value = codeLogin;
			return;
		case 'user':
			login.value = userLogin;
			return;
		case 'register':
			login.value = register;
			return;
		default:
			login.value = userLogin;
			return;
	}
};
</script>
<style lang="scss" scoped>
.conainer {
	width: 100%;
	height: 100vh;
	box-sizing: border-box;
	background-image: url('@/assets/img/login.png');
	background-size: cover;
	background-repeat: no-repeat;
	position: relative;

	.login {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 50%;
		background: rgba(255, 255, 255, 1);
		border-radius: 8px;
		overflow: hidden;
		display: flex;
		align-items: center;

		&-left {
			flex: 1;
		}

		&-right {
			flex: 1;
			padding: 20px;

			h4 {
				text-align: center;
				font-size: 20px;
				letter-spacing: 4px;
			}
		}
	}

	@media screen and (max-width: 600px) {
		.login {
			width: calc(100% - 40px);

			&-left {
				display: none;
			}
		}
	}
}
</style>
